window.onload = function() {
    console.log('交易页面已加载 - 实现删除帖子功能');
    
    // 初始化搜索功能
    initSearchFunctionality();
    
    // 初始化帖子列表
    initPosts();
};

// 初始化帖子列表
function initPosts(filteredPosts = null) {
    // 获取帖子容器
    const gridContainer = document.querySelector('.grid-container');
    if (!gridContainer) {
        console.error('无法找到帖子容器 .grid-container');
        return;
    }
    
    if (filteredPosts) {
        // 如果传入了过滤后的帖子列表，直接渲染
        gridContainer.innerHTML = '';
        filteredPosts.forEach(post => {
            renderPost(gridContainer, post);
        });
    } else {
        // 模拟从API获取帖子数据
        fetchPosts().then(posts => {
            // 清空容器
            gridContainer.innerHTML = '';
            
            // 渲染帖子列表
            posts.forEach(post => {
                renderPost(gridContainer, post);
            });
        }).catch(error => {
            console.error('获取帖子失败:', error);
            alert('获取帖子列表失败，请刷新页面重试');
        });
    }
}

// 初始化搜索功能
function initSearchFunctionality() {
    // 查找已存在的搜索框元素
    const searchBox = document.querySelector('.search-box');
    const searchSvgs = document.querySelectorAll('.Search-svg'); // 获取所有搜索图标
    
    // 检查必要的元素是否存在
    if (!searchBox) {
        console.error('未找到搜索框元素');
        return;
    }
    
    // 向搜索框添加输入框
    searchBox.innerHTML = `
        <input type="text" id="searchInput" placeholder="输入标题或帖子ID搜索" />
    `;
    
    // 为所有搜索图标添加点击事件和指针样式
    searchSvgs.forEach(svg => {
        svg.style.cursor = 'pointer';
        svg.addEventListener('click', performSearch);
    });
    
    // 为输入框添加回车搜索功能
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        searchInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                performSearch();
            }
        });
    }
}

// 执行搜索操作
function performSearch() {
    const searchInput = document.getElementById('searchInput');
    if (!searchInput) return;
    
    const searchValue = searchInput.value.trim();
    if (!searchValue) {
        alert('请输入搜索内容');
        return;
    }
    
    // 显示加载状态
    alert('搜索中，请稍候...');
    
    // 判断是搜索帖子ID还是作者ID
    // 如果输入的是纯数字，则尝试作为帖子ID搜索
    if (!isNaN(searchValue) && searchValue !== '' && searchValue.indexOf('.') === -1) {
        const postId = parseInt(searchValue);
        console.log(`搜索帖子ID: ${postId}`);
        
        // 调用后端API根据帖子ID查找帖子内容
        fetch(`/api/post/findPost/${postId}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
                // 如果需要认证，可以添加token
                // 'Authorization': 'Bearer ' + token
            }
        })
        .then(response => {
            console.log('搜索请求已发送，等待响应...');
            
            // 检查响应状态
            if (response.status === 200) {
                return response.json();
            } else if (response.status === 401) {
                throw new Error('未授权，请先登录');
            } else if (response.status === 403) {
                throw new Error('没有权限访问此内容');
            } else if (response.status === 404) {
                throw new Error('未找到该帖子');
            } else {
                throw new Error(`搜索失败: 服务器返回 ${response.status}`);
            }
        })
        .then(data => {
            // 处理成功响应
            console.log('搜索成功，服务器返回:', data);
            
            if (data && data.code === 200 && data.data) {
                // 将API返回的帖子数据转换为前端显示所需的格式
                const formattedPost = {
                    id: postId,
                    title: data.data.articalName || '无标题',
                    content: data.data.content || '',
                    price: data.data.price || '价格面议',
                    image: '../img/default.jpg' // 使用默认图片
                };
                
                initPosts([formattedPost]);
            } else {
                alert(data && data.message || '未找到匹配的帖子');
            }
        })
        .catch(error => {
            console.error('搜索失败:', error);
            alert('搜索失败: ' + error.message);
        });
    } else {
        // 否则作为作者ID搜索
        console.log(`搜索作者ID: ${searchValue}`);
        
        // 调用后端API根据作者ID查找其所有帖子
        fetch(`/api/post/findId/${encodeURIComponent(searchValue)}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
                // 如果需要认证，可以添加token
                // 'Authorization': 'Bearer ' + token
            }
        })
        .then(response => {
            console.log('搜索请求已发送，等待响应...');
            
            // 检查响应状态
            if (response.status === 200) {
                return response.json();
            } else if (response.status === 401) {
                throw new Error('未授权，请先登录');
            } else if (response.status === 403) {
                throw new Error('没有权限访问此内容');
            } else if (response.status === 404) {
                throw new Error('未找到该作者或其帖子');
            } else {
                throw new Error(`搜索失败: 服务器返回 ${response.status}`);
            }
        })
        .then(data => {
            // 处理成功响应
            console.log('搜索成功，服务器返回:', data);
            
            if (data && data.code === 200 && data.data && data.data.length > 0) {
                // 由于接口只返回帖子ID数组，需要为每个ID创建一个简单的帖子对象用于显示
                const formattedPosts = data.data.map(postId => ({
                    id: postId,
                    title: `帖子 #${postId}`,
                    content: `作者: ${searchValue} 的帖子内容`,
                    price: '价格面议',
                    image: '../img/default.jpg'
                }));
                
                initPosts(formattedPosts);
            } else {
                alert(data && data.message || '未找到该作者的帖子');
            }
        })
        .catch(error => {
            console.error('搜索失败:', error);
            alert('搜索失败: ' + error.message);
        });
    }
}

// 模拟获取帖子数据的函数
function fetchPosts() {
    // 在实际项目中，这里应该调用真实的API获取帖子列表
    // 为了演示，返回一些模拟数据
    return new Promise((resolve, reject) => {
        // 模拟网络延迟
        setTimeout(() => {
            const mockPosts = [
                {
                    id: 1,
                    title: '出售二手笔记本电脑',
                    content: '九成新笔记本，配置高，价格优惠',
                    price: '¥4500',
                    image: '../img/post1.jpg'
                },
                {
                    id: 2,
                    title: '闲置书籍转让',
                    content: '多本编程书籍，几乎全新',
                    price: '¥50-100',
                    image: '../img/post2.jpg'
                },
                {
                    id: 3,
                    title: '出租单间公寓',
                    content: '交通便利，设施齐全，拎包入住',
                    price: '¥2000/月',
                    image: '../img/post3.jpg'
                },
                {
                    id: 4,
                    title: '健身年卡转让',
                    content: '还有8个月有效期，价格可议',
                    price: '¥1200',
                    image: '../img/post4.jpg'
                },
                {
                    id: 5,
                    title: '出售手机',
                    content: 'iPhone 13，无磕碰，电池健康90%',
                    price: '¥3500',
                    image: '../img/post5.jpg'
                },
                {
                    id: 6,
                    title: '二手电动车出售',
                    content: '去年购买，续航50公里，送头盔锁具',
                    price: '¥1800',
                    image: '../img/post6.jpg'
                }
            ];
            resolve(mockPosts);
        }, 500);
    });
}

// 渲染单个帖子
function renderPost(container, post) {
    const gridCell = document.createElement('div');
    gridCell.className = 'grid-cell';
    gridCell.setAttribute('data-post-id', post.id);
    
    // 创建帖子内容
    gridCell.innerHTML = `
        <div class="post-content">
            <div class="post-image">
                <img src="${post.image || '../img/default.jpg'}" alt="${post.title}">
            </div>
            <div class="post-info">
                <h3 class="post-title">${post.title}</h3>
                <p class="post-description">${post.content}</p>
                <div class="post-price">${post.price}</div>
                <div class="post-actions">
                    <button class="update-button" data-post-id="${post.id}">更新</button>
                    <button class="delete-button" data-post-id="${post.id}">删除</button>
                </div>
            </div>
        </div>
    `;
    
    container.appendChild(gridCell);
    
    // 添加帖子点击跳转功能
    gridCell.style.cursor = 'pointer';
    gridCell.addEventListener('click', function() {
        window.location.href = `post-detail.html?id=${post.id}`;
    });
    
    // 为更新按钮添加点击事件
    const updateButton = gridCell.querySelector('.update-button');
    if (updateButton) {
        updateButton.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡
            const postId = parseInt(this.getAttribute('data-post-id'));
            openUpdateModal(postId);
        });
    }
    
    // 为删除按钮添加点击事件
    const deleteButton = gridCell.querySelector('.delete-button');
    if (deleteButton) {
        deleteButton.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡
            const postId = parseInt(this.getAttribute('data-post-id'));
            confirmDelete(postId);
        });
    }
}

// 确认删除对话框
function confirmDelete(postId) {
    if (window.confirm('确定要删除这个帖子吗？')) {
        deletePost(postId);
    }
}

// 删除帖子函数 - 符合接口规范
function deletePost(postId) {
    console.log(`准备删除帖子，ID: ${postId}`);
    
    fetch(`/api/post/delete/${postId}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
            // 如果需要认证，可以添加token
            // 'Authorization': 'Bearer ' + token
        }
    })
    .then(response => {
        console.log('删除请求已发送，等待响应...');
        
        // 检查响应状态
        if (response.status === 200 || response.status === 204) {
            // 尝试解析JSON响应（204可能没有响应体）
            if (response.status === 200) {
                return response.json().then(data => {
                    return { status: response.status, data };
                });
            } else {
                return { status: response.status, data: null };
            }
        } else if (response.status === 401) {
            throw new Error('未授权，请先登录');
        } else if (response.status === 403) {
            throw new Error('没有权限删除这个帖子');
        } else {
            throw new Error(`删除失败: 服务器返回 ${response.status}`);
        }
    })
    .then(result => {
        // 处理成功响应
        console.log('删除成功，服务器返回:', result);
        
        let successMessage = '删除成功';
        if (result.data && result.data.message) {
            successMessage = result.data.message;
        }
        
        alert(successMessage);
        
        // 从页面中移除被删除的帖子
        removePostFromDOM(postId);
    })
    .catch(error => {
        console.error('删除失败:', error);
        alert('删除失败: ' + error.message);
    });
}

// 从DOM中移除被删除的帖子
function removePostFromDOM(postId) {
    const postElement = document.querySelector(`.grid-cell[data-post-id="${postId}"]`);
    if (postElement) {
        // 添加淡出动画
        postElement.style.transition = 'opacity 0.3s ease-out';
        postElement.style.opacity = '0';
        
        // 动画结束后移除元素
        setTimeout(() => {
            postElement.remove();
            
            // 检查是否需要重新初始化帖子列表
            const gridContainer = document.querySelector('.grid-container');
            if (gridContainer && gridContainer.children.length === 0) {
                initPosts();
            }
        }, 300);
    }
}

// 在window.onload函数之前添加以下更新功能相关函数

// 创建更新帖子的模态框
function createUpdateModal() {
    // 检查是否已存在模态框
    if (document.getElementById('updateModal')) return;
    
    const modalHTML = `
    <div id="updateModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;">
        <div class="modal-content" style="background-color: white; padding: 20px; border-radius: 5px; width: 500px; max-width: 90%;">
            <h2>编辑交易帖子</h2>
            <input type="hidden" id="editPostId">
            <div class="form-group">
                <label for="editTitle">交易标题:</label>
                <input type="text" id="editTitle" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="editContent">交易描述:</label>
                <textarea id="editContent" class="form-control" rows="4" required></textarea>
            </div>
            <div class="form-group">
                <label for="editPrice">价格:</label>
                <input type="text" id="editPrice" class="form-control" required>
            </div>
            <div class="modal-buttons" style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px;">
                <button id="cancelUpdate">取消</button>
                <button id="confirmUpdate">确认更新</button>
            </div>
        </div>
    </div>`;
    
    document.body.insertAdjacentHTML('beforeend', modalHTML);
    
    // 添加事件监听器
    document.getElementById('cancelUpdate').addEventListener('click', closeUpdateModal);
    document.getElementById('confirmUpdate').addEventListener('click', confirmUpdate);
}

// 打开更新模态框
function openUpdateModal(postId) {
    // 确保模态框已创建
    createUpdateModal();
    
    // 查找要编辑的帖子
    fetchPosts().then(posts => {
        const postToEdit = posts.find(post => post.id === postId);
        if (!postToEdit) {
            alert('未找到该帖子');
            return;
        }
        
        // 填充模态框
        document.getElementById('editPostId').value = postId;
        document.getElementById('editTitle').value = postToEdit.title || '';
        document.getElementById('editContent').value = postToEdit.content || '';
        document.getElementById('editPrice').value = postToEdit.price || '';
        
        // 显示模态框
        document.getElementById('updateModal').style.display = 'flex';
    }).catch(error => {
        console.error('获取帖子信息失败:', error);
        alert('获取帖子信息失败，请重试');
    });
}

// 关闭更新模态框
function closeUpdateModal() {
    document.getElementById('updateModal').style.display = 'none';
}

// 确认更新帖子
function confirmUpdate() {
    const postId = parseInt(document.getElementById('editPostId').value);
    const title = document.getElementById('editTitle').value.trim();
    const content = document.getElementById('editContent').value.trim();
    const price = document.getElementById('editPrice').value.trim();
    
    // 验证内容
    if (!title || !content || !price) {
        alert('请填写所有必填字段');
        return;
    }
    
    // 构建请求数据
    const postDto = {
        id: postId,
        title: title,
        content: content,
        price: price
    };
    
    // 调用更新接口
    updatePost(postDto);
}

// 更新帖子函数
function updatePost(postDto) {
    console.log('尝试更新帖子，ID:', postDto.id);
    
    // 调用更新接口
    fetch('/api/post/update', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 如果需要认证，可以在这里添加token等认证信息
            // 'Authorization': 'Bearer ' + token
        },
        body: JSON.stringify(postDto)
    })
    .then(response => {
        console.log('更新请求已发送，正在等待响应...');
        if (!response.ok) {
            throw new Error(`服务器响应错误: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('更新成功，服务器返回:', data);
        
        // 重新加载帖子列表以显示更新后的内容
        initPosts();
        
        // 关闭模态框
        closeUpdateModal();
        
        // 显示成功提示
        alert(data.message || '更新成功');
    })
    .catch(error => {
        console.error('更新失败:', error);
        alert('更新失败: ' + error.message);
    });
}